<template>
    <div>
        <div :class="isDrag ? 'backHome drag' : 'backHome'" :style="{right: disLeft, top: disTop}" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            disLeft: '100px',
            disTop: 'calc(100vh - 150px)',
            dragState: false,
            clickY: null,
            isDrag: false
        }
    },
    methods: {
        handleMouseDown(e){
            this.dragState = true
            this.clickY = e.clientY
            this.isDrag = true
        },
        handleMouseUp(e){
            this.isDrag = false
            if (e.clientY === this.clickY) {
                this.$router.go(-1)
            }
        },
        handleMouseMove(e){
            document.onmousemove = (de) => {
                if ( this.dragState) {
                    this.disTop = de.clientY - 25 + 'px'
                }
            }
            document.onmouseup = () => {
                this.isDrag = false
                this.dragState = false
            }
            
        }
    },
}
</script>

<style lang="less" scoped>
@import '../css/common.less';
.backHome{
  position: fixed;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: @green;
  box-shadow: 0 0 31px black;
  color: @white;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  padding-top: 17px;
  box-sizing: border-box;
  user-select: none;
  &:hover{
    background: @darkgreen;
  }
  &.drag{
    box-shadow:  0 0 31px @darkgreen;
    background: @white;
    color: @darkgreen;
  }
}
</style>
